<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>翻书</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	    <meta name="apple-mobile-web-app-capable" content="yes" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
		
		<style type="text/css">
			*{margin: 0;padding: 0;box-sizing: border-box;}
			html{background-color: #CB394E;}
			.book{position: fixed;bottom: 4rem;left: 50%;transform: translateX(-50%);background: url(img/book_shadow.png) no-repeat bottom center;
				background-size: 100% auto;    padding: 0 0.3rem 0.6rem; box-sizing: content-box;}
			.book,.page{width: 13.2rem;height: 11rem;}
			.book-wraper{ width: 100%;height: 100%;perspective: 800px;    transform: translateY(-480px); }
			.page{position: absolute;transform-style: preserve-3d;transform: rotateX(90deg) translateZ(-480px);transform-origin: 6.6rem 11rem;
				top: 0; bottom: 0; }
			.page-side{position: absolute;top: 0;padding: 20px 0;background-color:#f5e5b6;width: 6.6rem;height: 11rem;perspective: 800px;
				background-repeat: no-repeat;background-size: 200% 100%; font-size: 24px; backface-visibility: hidden; }
			.page-left{border-top-left-radius: .5rem;border-bottom-left-radius: .5rem;right: 50%;
				transform-origin: 100% 50%; background-position: left top; }
			.page-right{border-bottom-right-radius: .5rem;border-top-right-radius: .5rem;left: 50%;transform-origin: 0 50%;
				background-position: right top}
			
			.turnLeft .pre .page-right{
				animation: pre_right 2s forwards;
			}
			.turnLeft .unfold .page-left{
				animation: unfold_left 2s forwards;
			}
			.turnRight .pre .page-left{
				animation: pre_left 2s forwards;
			}
			.turnRight .unfold .page-right{
				animation: unfold_right 2s forwards;
			}
			/* 合起来 时页面动画*/
			@keyframes pre_left{
				from{transform: rotateY(0);}
				to{transform: rotateY(180deg);}
			}
			@keyframes pre_right{
				from{transform: rotateY(0);}
				to{transform: rotateY(-180deg);}
			}
			/*打开 时页面动画*/
			@keyframes unfold_left{
				from{transform: rotateY(180deg);}
				to{transform: rotateY(0);}
			}
			@keyframes unfold_right{
				from{transform: rotateY(-180deg);}
				to{transform: rotateY(0);}
			}
			
			/* 下面这个样式 为了 让翻页过去的时候，旧的页面不被覆盖*/
			.turnLeft .pre{z-index: 10;animation: zfold_left step-end 2s forwards;}
			.turnLeft .unfold{z-index:9;animation: zunfold_left step-end 2s forwards;}
			
			/*把 33.5% 改成了 29% ，因为发现 33.5% 还是存在一小段时间 被旧页面覆盖了，因为层级不够*/
			@keyframes zfold_left{
				0%{z-index: 10;} 29%, 100%{z-index: 8;}
			}
			@keyframes zunfold_left{
				0%{z-index: 9;}	29%, 100%{z-index: 10;}
			}
			
			.turnRight .pre{z-index: 9;animation: zfold_right step-end 2s forwards;}
			.turnRight .unfold{z-index:9;animation: zunfold_right step-end 2s forwards;}
			@keyframes zfold_right{
				0%{z-index: 9;}	29%, 100%{ z-index: 9;}
			}
			@keyframes zunfold_right{
				0%{z-index: 9;}	29%, 100%{z-index: 10;}
			}
			
			/* 页面背景图*/
			.page1 .page-left,.page1 .page-right{background-image: url(../img/bg_1.jpg);}
			.page2 .page-left,.page2 .page-right{background-image: url(../img/bg_2.jpg);}
			.page3 .page-left,.page3 .page-right{background-image: url(../img/bg_3.jpg);}
			.page4 .page-left,.page4 .page-right{background-image: url(../img/bg_4.jpg);}
			.page5 .page-left,.page5 .page-right{background-image: url(../img/bg_5.jpg);}
			.book .ini{z-index: 10;}
			.book .unfold {opacity: 1;}
			.book .foldLeft,.book .foldRight{z-index: 8;opacity: 0;transform: rotateX(90deg) translateZ(-480px);}
			
			/*前进后退按钮*/
			.next_btn, .pre_btn {width: 2rem;height: 2rem;line-height: 2rem;font-size: 0.3rem;display: block;border-radius: 100%;
    				background: rgba(2, 29, 44, 0.8);color: #FFFFFF;z-index: 13;position: absolute;text-align: center;top: 1rem;}
    		.next_btn{right: 1rem;} .pre_btn{left: 1rem;}
		</style>
		<script src="js/rem2.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
        <div class="myBook">
        	<a href="javascript:void(0);" class="next_btn">下一页</a>
	        <a href="javascript:void(0);" class="pre_btn">上一页</a>
			<div class="book">
				<div class="book-wraper">
					<div id="page1" class="page page1 ini">
						<div class="page-side page-left">11</div>
						<div class="page-side page-right">11</div>
					</div>
					<div id="page2" class="page page2 foldRight">
						<div class="page-side page-left">22</div>
						<div class="page-side page-right">22</div>
					</div>
					<div id="page3" class="page page3 foldRight">
						<div class="page-side page-left">33</div>
						<div class="page-side page-right">33</div>
					</div>
					<div id="page4" class="page page4 foldRight">
						<div class="page-side page-left">44</div>
						<div class="page-side page-right">44</div>
					</div>
					<div id="page5" class="page page5 foldRight">
						<div class="page-side page-left">55</div>
						<div class="page-side page-right">55</div>
					</div>
				</div>
			</div>
        </div>
		<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var pageHeight = document.documentElement.clientHeight;
	        var page = 1;
	        var pageNum;
	
	        document.querySelector('.myBook').style.height = pageHeight + 'px';
	        pageNum = document.querySelectorAll('.page').length;
	
	        document.querySelector('.next_btn').onclick = function () {
	        	
	            if (page > 1) {
	            	var p=page - 1
	                document.getElementById('page' + p).setAttribute('class', 'page foldLeft page'+p);
	            }
	            
	            // 正常页数之内
	            if (page < pageNum ) {
	                document.getElementById('page' + page).setAttribute('class', 'page pre page'+page);
	                page += 1;
	                document.getElementById('page' + page).setAttribute('class', 'page unfold page'+page);
	                document.querySelector('.myBook').setAttribute('class', 'myBook turnLeft cpage' +
	                    page);
	            } 
	            
	            // 最后一页
	            else {
	                console.log(page);
	                document.querySelector('.myBook').setAttribute('class', 'myBook turnLeft cpage' +
	                    page + ' end');
	            }
	        };
	
	        document.querySelector('.pre_btn').onclick = function () {
	        	
	            if (page < pageNum ) {
	            	var p=page + 1
	                document.getElementById('page' + p).setAttribute('class', 'page foldRight page'+p);
	            }
	            
	            if (page > 1) {
	                document.getElementById('page' + page).setAttribute('class', 'page pre page'+page);
	                page -= 1;
	                document.getElementById('page' + page).setAttribute('class', 'page unfold page'+page);
	                document.querySelector('.myBook').setAttribute('class', 'myBook turnRight cpage' +
	                    page);
	            }
	            
	        };
	        
		</script>
		
	</body>

</html>